<!--审计日志-->
<template>
    <div>
        <a-row>
            <a-card>
                <p slot="title">
                    检索条件
                </p>
                <div class="formSearch">
                    <a-form ref="searchForm" :model="searchForm" :label-width="80" layout="inline"
                            @keydown.native.enter.prevent="handleSubmit('searchForm')">
                        <a-row>
                            <a-form-item label="日志级别：" pro="itemCode" style="margin-right: 25px;">
                                <a-radio-group  v-model="searchForm.info" @change="onChange">
                                    <a-radio value="error">ERROR</a-radio>
                                    <a-radio value="info">INFO</a-radio>
                                </a-radio-group>
                            </a-form-item>
                            <a-button type="primary" @click="handleSubmit('searchForm')">查询
                            </a-button>
                            <a-button style="margin-left: 8px" @click="reStore">重置</a-button>
                        </a-row>
                    </a-form>
                </div>
            </a-card>
            <div style="height: 10px"></div>
            <div class="commonStyle nyContent">
                <div class="table-operator" v-if ='Number(page.total)>0'>
                    <a-button type="primary" @click="exportLogs" v-if="hasPermission('audit:exportLogs')">导出日志</a-button>
                    <a-button type="danger" @click="clearAllLogs" v-if="hasPermission('audit:clearLogs')">清除日志</a-button>
                </div>
                <div class="edittable-table-height-con">
                    <div class="log-total-table-wrap">
                        <table class="log-table-fix-head">
                            <thead>
                            <tr style="height:1px;overflow:hidden;">
                                <th class="one">
                                    <div class="td-cell">序号</div>
                                </th>
                                <th class="two">
                                    <div class="td-cell">时间</div>
                                </th>
                                <th class="three">
                                    <div class="td-cell">级别</div>
                                </th>
                                <th class="four">
                                    <div class="td-cell">日志内容</div>
                                </th>
                            </tr>
                            </thead>
                        </table>
                        <div class="log-info-table-wrap">
                            <table class="log-info-table">
                                <thead>
                                <tr style="height:1px;overflow:hidden;">
                                    <th class="one"></th>
                                    <th class="two"></th>
                                    <th class="three"></th>
                                    <th class="four"></th>
                                </tr>
                                </thead>
                                <tbody class="log-info-content-body" v-html="rowsHtml">
                                </tbody>
                                <tbody>
                                <tr v-if="rowsHtml === ''">
                                    <td colspan="4" style="text-align: center">暂无数据</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <Page :totalCount="page.total" :currentPage="page.currentPage" ref="page"
                          :pageSize="page.pageSize" @changePage="changePage" :pageSizeOptions="array"
                          @changePageSize="changePageSize" />
                </div>
            </div>
            <iframe id="ifile" style="display: none"></iframe>
        </a-row>
    </div>
</template>

<script>
    import Page from 'module/pagination'
    import ellipsis from 'module/ellipsis'
    import verify from 'libs/verify'
    export default {
        name: 'monitLogs',
        components: {
            Page,
            ellipsis
        },
        data () {
            return {
                verify,
                searchErrorMsg: '',
                listT: [],
                page: {
                    currentPage: 1,
                    pageSize: 1000,
                    total:0
                },
                array: [ '1000', '2000', '3000', '4000','5000' ],
                searchForm: {
                    userName: '',
                    loginIp: '',
                    date: [],
                    itemCode: '',
                    info: 'info'
                },
                startValue: null,
                endValue: null,
                showTextNum: 30,
                rowsHtml: '',
                token: sessionStorage.getItem ('token'),
            }
        },
        methods: {
            onChange ( e ) {
                this.searchForm.info= e.target.value
            },
            reStore () {
                this.searchForm.info ='info'
                this.page.currentPage = 1
                this.init ()
            },
            /**
             * Function    : init
             * Description : 初始化加载页面
             * Input       : none
             * Return      : none
             */
            init () {
                this.loadPageData ()
            },

            /**
             * Function    : loadPageData
             * Description : 加载页面数据
             * Input       : None
             * Return      : None
             */
            loadPageData () {
                let _this = this
                _this.$get ('api/audit/getLog',{logs:this.searchForm.info.toLowerCase(),currentPage:this.page.currentPage,pageSize:this.page.pageSize}).then (res => {
                    if (res.code === 0) {
                        _this.rowsHtml = res.data.log
                        _this.page.total = Number(res.data.total)
                    } else {
                        _this.rowsHtml = ''
                        _this.page.total = 0
                    }
                    _this.spinning = false
                })
            },

            /**
             * Function    : loadPageData
             * Description : 重新加载加载页面数据
             * Input       : None
             * Return      : None
             */
            reloadPageData () {
                this.page.currentPage = 1
                this.loadPageData ()
            },

            /*查询*/
            handleSubmit () {
                this.page.currentPage = 1
                this.reloadPageData ()
            },
            changePage ( currentPage ) {
                this.page.currentPage = currentPage
                this.loadPageData ()
            },
            /*切换每页条数*/
            changePageSize ( vm ) {
                this.page.pageSize = vm
                this.page.currentPage = 1
                this.loadPageData ()
            },

            /**
             * Function    : rowClassName
             * Description : 篡改记录标红
             * Input       : data 树节点数据
             * Return      : none
             */
            rowClassName ( row ) {
                if (row.flag === '1') {
                    return 'demo-table-info-row-err'
                }
                return ''
            },
            exportLogs(){
                document.getElementById ('ifile').src =this.$api+ '/audit/exportLogs?token=' + this.token +'&logs=' + this.searchForm.info.toLowerCase()

            },
            // 清楚所有日志的时候需要先进行导出日志后
            clearAllLogs(){
                let _this = this
                this.$confirm ({
                    title: `确定要删除所有日志吗?`,
                    okText: '确定',
                    cancelText: '取消',
                    onOk: () => {
                        document.getElementById ('ifile').src =this.$api+ '/audit/clearLogs?token=' + this.token
                        let timer = setInterval (function () {
                            let iframe = document.getElementById ('ifile')
                            let iframeDoc = iframe.contentDocument || iframe.contentWindow.document
                            if (iframeDoc) {
                                if (iframeDoc.readyState === 'complete' || iframeDoc.readyState === 'interactive') {
                                    _this.loadPageData ()
                                    clearInterval (timer)
                                }
                            }
                        }, 4000)
                    }
                })
            }

        },
        created () {
            this.init ()
        },
        mounted () {

        },
        destroyed () {

        }
    }
</script>
<style lang="less" scoped>
    /*自定义信息日志表格样式*/
    .log-total-table-wrap {
        overflow: hidden;
        width: 100%;
        position: relative;
        margin-top: 0px;
    }

    .log-info-table {
        height: 700px;
        table-layout: fixed;
        width: 100%;
        overflow: auto;
        border-collapse: collapse;
        border: 1px solid #e9eaec;
        td {
            min-width: 0;
            height: 38px !important;
            box-sizing: border-box;
            text-align: left;
            text-overflow: ellipsis;
            vertical-align: middle;
            border-bottom: 1px solid #e9eaec;
            border-right: 1px solid #e9eaec;
        }
        th {
            height: 1px;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            background-color: #f8f8f9;
            min-width: 0;
            box-sizing: border-box;
            text-align: left;
            text-overflow: ellipsis;
            vertical-align: middle;
            border-right: 1px solid #e9eaec;
            .td-cell {
                padding: 4px 18px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                word-break: break-all;
                box-sizing: border-box;
                display: inline-block;
                word-wrap: normal;
                vertical-align: middle;
            }
        }
        .one {
            width: 100px;
        }
        .two {
            width: 300px;
        }
        .three {
            width: 100px;
        }
        .four {
            //width:70px;
            width: auto;
        }
        .log-info-content-body tr:nth-child(2n) {
            background-color: #f8f8f9;
        }
    }

    .log-table-fix-head {
        position: absolute;
        top: 0px;
        background: #f3f4f7;
        z-index: 3;
        width: 100%;
        table-layout: fixed;
        overflow: auto;
        border-collapse: collapse;
        th {
            height: 52px;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            background-color: #f3f4f7;
            min-width: 0;
            box-sizing: border-box;
            text-align: left;
            text-overflow: ellipsis;
            vertical-align: middle;
            /*border-right: 1px solid #e9eaec;*/
            .td-cell {
                padding-left: 18px;
                padding-right: 18px;
            }
        }
        .one {
            width: 100px;
        }
        .two {
            width: 300px;
        }
        .three {
            width: 100px;
        }
        .four {
            //width:70px;
            width: auto;
        }

    }

    .log-info-content-body {
        tr td > div {
            padding-left: 18px;
            padding-right: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            word-break: break-all;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: inline-block;
            word-wrap: normal;
        }
        tr td:first-child > div {
            text-align: center;
            width: 100px !important;
        }
        tr td:nth-child(2) > div {
            width: 300px;
        }
        tr td:nth-child(3) > div {
            width: 100px;
        }
        tr td:nth-child(4) > div {
            width:auto;
        }
    }

    .log-info-table-wrap {
        position: relative;
        height: 445px;
        margin-top: 51px;
        overflow: auto;
        border-bottom: 1px solid #e9eaec;
    }
</style>
